<template>
 <div class="box">
   <div class="box-header">
     <mt-header :title='titles'>
        <router-link to="" slot="left">
          <mt-button icon="back" @click="$router.back(-1)"></mt-button>
        </router-link>
        <mt-button slot="right" icon="more"></mt-button>
      </mt-header>
   </div>
   <div class="box-body">
     <router-view></router-view>
   </div>
     <div class="box-footer" v-show='showNav'>
       <Tabbar/>
     </div>
 </div>
</template>
 
<script>

import Tabbar from './components/Tabbar'
import { Header } from 'mint-ui'
export default {
  name: 'App',
  components:{
    Tabbar
  },
  data() {
    return {
      showNav: true,
       titles:'Yoho Buy!',
      list:[
        {image:'../static/img/1.png'}
      ]
      
    }
  },
  watch:{
      '$route':'isNave'  
  },
  methods:{
    isNave(){
        // console.log(this)
           if(this.$route.fullPath==="/Cart"){
            //  console.log("aaa")
             this.showNav = false 
             this.titles= '购物车'
           }
            else if(this.$route.fullPath==="/Main"){
            //  console.log("aaa")
             this.showNav = false
              this.titles= '个人中心'
           }
           else if(this.$route.fullPath==="/Detail"){
             this.showNav= false
              this.titles= '商品详情'    
           }
            else if(this.$route.fullPath==="/Login"){
             this.showNav= false
             this.titles= '登录页面'        
           } else if(this.$route.fullPath==="/Cartlist"){
             this.showNav= false
             this.titles= '商品详情'      
           }else{
             this.showNav=true
             this.titles= 'Yohu Buy!'
           }
    }

  }
  
}
</script>

<style lang='scss'>
 /* .router-link-active {
    color: #900;
  }
  .router-link-exact-active {
    color: #09f;
  } */
  html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
// HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html,body,
.box{
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.box{
  display: flex;
  flex-direction: column;
   &-body{
     flex:1;
     overflow-x:hidden;
   }
   &-footer{
     height: 60px;
     border-top:1px solid #dededede ;
   }
}
.box-header{
  height: -1px;
 
}
.mint-header{
  background: #343434;
  font-size: 20px;
}
.box-body{
  background: #f8f8f8;
  
 
}
</style>
